<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets" template="index.xhtml">
	<ui:define name="body">
		<script type="text/javascript">
			$(document).ready(function() {
				$(".submenu-active").removeClass('submenu-active');
				$("#utilisateur").addClass('submenu-active');
			});
		</script>
		<f:view>
			<h:form>
				<h1>Utilisateurs</h1>
				<!-- <table class="nostyle">
					<tr>
						<td><h3>Hiérarchie des rôles</h3>
							<p:spacer width="300" height="5"></p:spacer>
						</td>
						<td><p:commandButton value="Modifier la Hirarchie des rôles "
								style="font-size: 0.9em"
								action="role.xhtml?faces-redirect=true}" ajax="false" />
						</td>
					</tr>
				</table> -->
				<p:separator />
				<table class="nostyle">
					<tr>
						<td>
							<h3>Identifiants</h3> <p:spacer width="300" height="5"></p:spacer>
						</td>
						<td>Sélectionner l'option qui vous semble préferable<!-- <h5></h5>  -->
							<h:panelGrid>
								<p:selectOneRadio id="options" layout="pageDirection">
									<f:selectItem
										itemLabel="Génerer les identifiants de maniére automatique"
										itemValue="1" />
									<f:selectItem
										itemLabel="Génerer les identifiants de maniére automatique de sorte que les identifiants correspondent aux matricules des salariés"
										itemValue="2" />
									<f:selectItem itemLabel="Saisir les identifiants à la main"
										itemValue="3" />
								</p:selectOneRadio>
							</h:panelGrid>
						</td>
					</tr>
				</table>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td>
							<h3>Plannings horaires</h3> <p:spacer width="300" height="10" />
						</td>
						<td>Créer les types d'absences(ex: CP, RTT,Séminare,etc.):<!-- <h5></h5> -->
							<br></br> <br></br>
							<table class="nostyle">
								<tr>
									<td>Type d'absence</td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td><h:inputText id="num" size="50" class="input-text" value="#{utilisbeant.typeAbsence}" />
										<br /></td>
								</tr>

							</table> <br></br> <p:commandButton
								value="Créer un nouveau type d'absence"
								style="font-size: 0.9em" ajax="false"
								action="#{utilisbeant.absencemanag}" >
									<p:ajax event="click"
							listener="#{utilisbeant.onClickCreateTypeAbsence}"
							update="pickListListAbsenceWVar" />
								</p:commandButton>
								 <p:pickList widgetVar="pickListListAbsenceWVar"  style=".ui-picklist .ui-picklist-list {width: 260px;}"
								id="selectTypeAbsencePickListId" value="#{utilisbeant.listOfAbsence}" var="absenceVar"
								effect="bounce" itemValue="#{absenceVar.name}" itemLabel="#{absenceVar.name}"
								 showSourceControls="true"
								showTargetControls="true" showSourceFilter="true"
								showTargetFilter="true" filterMatchMode="contains">

								<f:facet name="sourceCaption">Liste des absence</f:facet>
								<f:facet name="targetCaption">Absence selectionnee</f:facet>

								
									/>

								

								<p:column style="width:75%;">  
            #{absenceVar.name}  
        </p:column>

							</p:pickList> <br></br>
						</td>
						<td></td>
					</tr>
				</table>
				<br></br>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td>
							<h3>Comptes utilisateurs</h3> <p:spacer width="300" height="5"></p:spacer>
						</td>
						<td><p:commandButton value="Créer un utilisateur"
								style="font-size: 0.9em"
								action="utilisateurFormulaire?faces-redirect=true" /> <p:commandButton
								value="Liste des utilisateurs" style="font-size: 0.9em"
								immediate="true" action="utilisateurList?faces-redirect=true" />
						</td>
					</tr>
				</table>
			</h:form>
		</f:view>
	</ui:define>
</ui:composition>